<template>
  <div class="coreliteracy_container">
    <!-- 删除时触发的对话框 -->
    <div>
      <Modal v-model="dilLog_del" width="360">
        <template #header>
          <p style="color: #f60; text-align: center">
            <Icon type="ios-information-circle"></Icon>
            <span>是否确定删除文件!</span>
          </p>
        </template>

        <div style="text-align: center">
          <p>请选择操作</p>
        </div>
        <template #footer>
          <div>
            <Button @click="dilLog_del = false">取消</Button>
            <Button type="error" @click="fun_dilLog_del">确认删除</Button>
          </div>
        </template>
      </Modal>
    </div>
    <!-- 文件选择器 -->
    <Upload
      multiple
      type="drag"
      action="//jsonplaceholder.typicode.com/posts/"
      :before-upload="getUploadList"
      :accept="enable_type"
      :format="['jpg', 'jpeg', 'png']"
    >
      <div style="padding: 20px 0">
        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
        <p>点击或拖动文件上传</p>
      </div>
    </Upload>
    <!-- 图片预览 -->
    <div class="demo-image-lazy-vertical">
      <template v-for="(url, i) in verticalUrlList" :key="i">
        <Image :src="url" lazy preview :preview-list="verticalUrlList" />
      </template>
    </div>
    <!-- 按钮 -->
    <div>
      <Button long  @click="submit">确定上传</Button>
      <Button style="margin-top: 10px" long @click="clearlist"
        >清空当前图片列表</Button
      >
      <Button style="margin-top: 10px" long  @click="delfile"
        >删除oss文件</Button
      >
    </div>
  </div>
</template>

<script>
import { PATH_Coreliteracy_file } from '@/mylibs/define'
import putBuffer from '@/api/API_Uploading_Directory_Tree'
import { filetoBase64 } from '@/mylibs/functions'
export default {
  data() {
    return {
      enable_type: 'image/*',
      dilLog_del: false,
      verticalUrlList: []
    }
  },

  methods: {
    getUploadList(upload) {
      // console.log(upload)
      filetoBase64(upload, (base64) => {
        this.verticalUrlList.push(base64)
        this.$Notice.success({ desc: '图片转base64完成' })
      })

      return false
    },
    // 上传文件
    submit() {
      var name = PATH_Coreliteracy_file
      putBuffer('put', name, this.verticalUrlList, false).then(
        ({ res, ok, err }) => {
          if (!ok) {
            this.$Notice.error({ desc: '文件上传失败:' + err })
          } else {
            this.$Notice.success({ desc: '文件上传成功' })
          }
        }
      )
    },

    // 删除文件
    delfile() {
      this.dilLog_del = true
    },

    // 对话框确认删除
    fun_dilLog_del() {
      this.dilLog_del = false
      putBuffer('del', PATH_Coreliteracy_file).then(({ ok, err }) => {
        if (!ok) this.$Notice.error({ desc: '删除失败:' + err })
        else {
          this.$Notice.success({ desc: '删除成功' })
        }
      })
    },

    clearlist() {
      this.verticalUrlList.splice(0)
    }
  }
}
</script>

<style scoped>
.centent {
  width: 100px;
  height: 100px;

  margin: auto;
}
.demo-image-lazy-vertical {
  height: 400px;
  overflow-y: auto;
}
.coreliteracy_container{
  margin:10px
}
</style>
